<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
                <Row type="flex" justify="space-between">
                    <Col span="22">
                    <Row :gutter="24" type="flex">
                        <Col v-bind="grid">
                        <DatePicker type="daterange" v-width="'100%'" v-model="data.date" placeholder="到诊日期选择"
                            element-id="date" @on-change="formChangeData" />
                        </Col>
                        <Col v-bind="grid">
                        <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" clearable element-id="name"
                            @on-clear="empty" @on-enter="formChangeDatas(1)" />
                        </Col>
                        <Col v-bind="grid">
                        <FormItem label="来源渠道" prop="channel" label-for="channel">
                            <Select v-model="data.channel" clearable placeholder="渠道" element-id="channel"
                                @on-change="formChangeData">
                                <Option v-for="item in fdata.channel" :value="item.id" :key="item.id"
                                    :disabled="+item.status === 0">{{ item.name }}
                                </Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col v-bind="grid">
                        <FormItem label="病种类型" prop="disease" label-for="disease">
                            <Select v-model="data.disease" clearable placeholder="病种" element-id="disease"
                                @on-change="formChangeData">
                                <Option v-for="item in fdata.disease" :value="item.id" :key="item.id"
                                    :disabled="+item.status === 0">{{ item.name }}
                                </Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col v-bind="grid">
                        <FormItem label="诊室" prop="disease" label-for="disease">
                            <Select v-model="data.clinic_id" clearable placeholder="请选择诊室" element-id="disease"
                                @on-change="formChangeData">
                                <Option v-for="item in fdata.clinic_list" :value="item.id" :key="item.id"
                                    :disabled="+item.status === 0">{{ item.name }}
                                </Option>
                            </Select>
                        </FormItem>
                        </Col>
                    </Row>
                    </Col>
                    <Col span="2" v-if="registers">
                    <Button type="primary" @click="register">登记患者</Button>
                    </Col>
                </Row>
            </Form>
            <div class="i-table-no-border">
                <Table size="small" ref="table" :columns="columns" :data="tdata" :loading="loading"
                    @on-sort-change="handleChangeSort">
                    <template slot-scope="{row}" slot="source_name">
                        <Badge status="success" :text="row.source_name" />
                    </template>
                    <template slot-scope="{row}" slot="operation">
                        <a v-if="hqinfo" @click="handleDetailPatient(row)">详细</a>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page
                        :total="page.total"
                        :current.sync="page.page"
                        show-total
                        show-elevator
                        show-sizer transfer
                        :page-size="page.pageSize"
                        @on-change="formChangePage"
                        :page-size-opts="pageOpts"
                        @on-page-size-change="formSize" />
                </div>
            </div>
        </Card>
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers">
            <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId">
            </detailDrawer>
        </Drawer>
        <register @askData="formChange" ref="register" :channel="fdata.channel" :clinic_list="fdata.clinic_list" />
    </div>
</template>
<script>
    import {
        GuideList, GuideInfo
    } from '@/api/medical';
    import { mapState } from 'vuex';
    import detailDrawer from '../patient/patient-detail/index.vue'
    import register from './register.vue'

    export default {
        components: {
            detailDrawer, register
        },
        name: 'medical',
        data() {
            return {
                patientId: null,
                edit_type: 2,
                showTetailDrawer: false,
                loading: false,
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                pageOpts: [10, 20, 30, 50],
                columns: [
                    {
                        title: '基本信息',
                        key: 'basic',
                        minWidth: 138,
                        fixed: 'left'
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        minWidth: 130
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 100
                    },
                    {
                        title: '到诊时间',
                        key: 'created_at_str',
                        sortable: true,
                        minWidth: 160
                    },
                    {
                        title: '电话',
                        key: 'mobile',
                        minWidth: 138
                    },
                    {
                        title: '地区',
                        key: 'city_name',
                        minWidth: 100
                    },
                    {
                        title: '病种',
                        key: 'diseases_name',
                        minWidth: 100
                    },
                    {
                        title: '来源',
                        slot: 'source_name',
                        minWidth: 120
                    },
                    {
                        title: '操作',
                        slot: 'operation',
                        minWidth: 120
                    }
                ],
                tdata: [],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    channel: '',
                    disease: '',
                    clinic_id: ''
                },
                fdata: [],
                rules: {
                },
                sort: 0,
                hqinfo: false,
                registers: false
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth() {
                return this.isMobile ? undefined : 80;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'right';
            }
        },
        mounted() {
            this.state = JSON.parse(localStorage.getItem('poweredit'));
            for (let item of this.state) {
                if (item.name === '导医详细') {
                    this.hqinfo = item.bool
                } else if (item.name === "导医-登记患者") {
                    this.registers = item.bool
                }
            }
            this.getData({
                page: this.page.page,
                pageSize: this.page.pageSize
            })
        },
        methods: {
            closeDrawer() {
                this.getData({
                    page: this.page.page,
                    pageSize: this.page.pageSize
                })
            },
            // 清空
            empty() {
                this.getData({
                    page: this.page.page,
                    pageSize: this.page.pageSize
                })
            },
            // 排序
            handleChangeSort(column) {
                if (column.order === 'desc') {
                    this.sort = 1
                } else {
                    this.sort = 2
                }
                this.formChange()
            },
            // 获取列表数据
            getData(data) {
                this.loading = true
                GuideList(data).then(res => {
                    for (let i in res.list) {
                        res.list[i]['basic'] = [res.list[i]['name'], res.list[i]['gender_str'], res.list[i]['age']].join(' ')
                    }
                    this.tdata = res.list
                    this.fdata.disease = res.condition.patient_diseases_list;
                    this.fdata.channel = res.condition.source_channel_list;
                    this.fdata.clinic_list = res.condition.clinic_list;
                    this.page.total = res.total
                }).finally(() => {
                    this.loading = false
                })
            },
            // 时间
            formChangeData(val) {
                if (val === 1) {
                    this.data.date = ''
                    this.data.channel = ''
                    this.data.disease = ''
                } else this.data.name = ''
                this.page.page = 1
                this.formChange()
            },
            formChangeDatas(val) {
                if (this.data.name === '') {

                } else {
                    if (val === 1) {
                        this.data.date = ''
                        this.data.channel = ''
                        this.data.disease = ''
                    } else this.data.name = ''
                    this.page.page = 1
                    this.formChange()
                }
            },
            // 分页
            formChangePage(e) {
                this.page.page = e
                this.formChange()
            },
            // 页数
            formSize(i) {
                this.page.pageSize = i;
                this.formChange()
            },
            // 处理数据
            formChange() {
                let day = document.querySelector('#date').value;
                if (day) {
                    day = day.split(/\s-\s/);
                } else {
                    day = ['', '']
                }
                let data = {
                    patient_diseases_id: this.data.disease,
                    clinic_id: this.data.clinic_id,
                    source_channel_id: this.data.channel,
                    start_time: day[0],
                    end_time: day[1],
                    keywords: this.data.name,
                    page: this.page.page,
                    pageSize: this.page.pageSize,
                    sort: this.sort
                }
                this.getData(data);
            },
            handleDetailPatient(row) {
                this.patientId = row.id
                this.showTetailDrawer = true
                // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 2 })
                // this.$router.push('/patient/detail')
            },
            register() {
                this.$refs.register.initial()
            }
        }
    }
</script>